<template>
  <div id="assessdetail">
    <el-form :model="editForm" label-width="300px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" :rules="editFormRules" v-show="!pageLoading">
      <table cellspacing="0" cellpadding="0" class="mytable">
        <tr>
          <th style="min-width:100px;" >姓名</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.realname}}</template>
            </template>
          </td>
          <th style="min-width:100px;" >性别</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.gender}}</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >所属部门或单位</th>
          <td style="min-width:200px;" colspan="3">
            <template>
              <template>{{unitDataDetail.department}}</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >三级单位及部门</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.unitname}}</template>
            </template>
          </td>
          <th style="min-width:100px;" >职务级别</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.level}}</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >职务</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.job}}</template>
            </template>
          </td>
          <th style="min-width:100px;" >职务职级/专业技术等级</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.joblevel}}</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >是否在职</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.inposition}}</template>
            </template>
          </td>
          <th style="min-width:100px;" >是否登记备案人员</th>
          <td style="min-width:200px;">
            <template>
              <template>{{unitDataDetail.registered}}</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >涉密等级</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.classified}}</template>
            </template>
            <template v-else>
              <el-form-item prop="classified">
                <el-select v-model="editForm.classified" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="(item,index) in classifiedOptions" :key="'classified_' + index" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >事由</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.reason}}</template>
            </template>
            <template v-else>
              <el-form-item prop="reason">
                <el-select v-model="editForm.reason" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="(item,index) in reasonOptions" :key="'reason_' + index" :label="item" :value="item" />
                </el-select>
                <span v-if="editForm.reason === '其他'" style="color: #f00; font-weight: bolder; margin-left: 10px;"><br>请在备注栏说明具体情况</span>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >国家/地区</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.region}}</template>
            </template>
            <template v-else>
              <el-form-item prop="region">
                <el-input v-model="editForm.region" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >往返时间/出国（境）时间</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template v-if="editForm.tripdate">{{formatDate8(editForm.tripdate[0])}} 至 {{formatDate8(editForm.tripdate[1])}}</template>
            </template>
            <template v-else>
              <el-form-item prop="tripdate">
                <el-date-picker
                  v-model="editForm.tripdate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="请选择前往日期"
                  end-placeholder="请选择返回日期"
                  value-format="yyyyMMdd"
                  style="width: 300px;"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >本年度实际出国（境）次数</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.times}}</template>
            </template>
            <template v-else>
              <el-form-item prop="times">
                <el-input-number v-model="editForm.times" :min="1" :max="100" />
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >审批人姓名职务</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.approver}}</template>
            </template>
            <template v-else>
              <el-form-item prop="approver">
                <el-input v-model="editForm.approver" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >是否持因私证件办理公务</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.whether1}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether1">
                <el-select v-model="editForm.whether1" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether1_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >是否公款报销费用</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.whether2}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether2">
                <el-select v-model="editForm.whether2" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether2_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >是否遇到策反等异常</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether3}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether3">
                <el-select v-model="editForm.whether3" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether3_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >是否存在擅自出国（境）、超期未归、公款报销费用、泄露国家秘密等违规问题</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether4}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether4">
                <el-select v-model="editForm.whether4" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether4_' + item" :label="item" :value="item" />
                </el-select>
                <span v-if="editForm.whether4 === '是'" style="color: #f00; font-weight: bolder; margin-left: 10px;"><br>请在备注栏说明具体情况</span>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >返回后证件是否按时交集中保管</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether5}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether5">
                <el-select v-model="editForm.whether5" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether5_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >涉密人员出行前<br>是否进行风险研判</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether6}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether6">
                <el-select v-model="editForm.whether6" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'whether6_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >
            涉密人员出行前是否清<br>
            退涉密载体，并对所携<br>
            带智能设备安全检测</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether7}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether7">
                <el-select v-model="editForm.whether7" placeholder="请选择" style="width: 300px;">
                  <el-option label="涉密人员已检测" value="涉密人员已检测" />
                  <el-option label="涉密人员未检测" value="涉密人员未检测" />
                  <el-option label="非涉密人员" value="非涉密人员" />
                </el-select>
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >涉密人员是否填写回访表</th>
          <td style="min-width:200px;vertical-align: middle;">
            <template v-if="readOnly" >
              <template>{{editForm.whether8}}</template>
            </template>
            <template v-else>
              <el-form-item prop="whether8">
                <el-select v-model="editForm.whether8" placeholder="请选择" style="width: 300px;">
                  <el-option label="涉密人员已填写" value="涉密人员已填写" />
                  <el-option label="涉密人员未填写" value="涉密人员未填写" />
                  <el-option label="非涉密人员" value="非涉密人员" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >证件状态</th>
          <td style="min-width:200px;" colspan="3">
            <template v-if="readOnly" >
              <template>{{editForm.status}}</template>
            </template>
            <template v-else>
              <el-form-item prop="status">
                <el-select v-model="editForm.status" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in statusOptions" :key="'status_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >备注</th>
          <td colspan="3" style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.remarks}}</template>
            </template>
            <template v-else>
              <el-form-item prop="remarks">
                <el-input v-model="editForm.remarks" style="width: calc(100vw - 370px);" />
              </el-form-item>
            </template>
          </td>
        </tr>
      </table>
      <div style="display: flex; align-items: center;" v-if="editForm.wgFlag||!readOnly">
        <el-checkbox v-model="editForm.wgFlag" v-if="!readOnly"></el-checkbox>
        <h3 style="margin-left: 10px;">违规情况</h3>
      </div>
      <table v-if="editForm.wgFlag" cellspacing="0" cellpadding="0" class="mytable">
        <tr>
          <th style="min-width:100px;" >违规情况简述</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.description}}</template>
            </template>
            <template v-else>
              <el-form-item prop="description">
                <el-input v-model="editForm.description" style="width: calc(100vw - 370px);" />
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >调查处理结果</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.result}}</template>
            </template>
            <template v-else>
              <el-form-item prop="result">
                <el-input v-model="editForm.result" style="width: calc(100vw - 370px);" />
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >备注</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.violationremarks}}</template>
            </template>
            <template v-else>
              <el-form-item prop="violationremarks">
                <el-input v-model="editForm.violationremarks" style="width: calc(100vw - 370px);" />
              </el-form-item>
            </template>
          </td>
        </tr>
      </table>
      <template v-if="!readOnly">
        <el-button type="primary" @click.native="editFormSubmit()" :loading="saveloading" style="margin-left:10px; margin-top: 10px;">保存</el-button>
      </template>
      <div style="height: 50px;"></div>
    </el-form>
  </div>
</template>

<script>
export default {
  watch: {
    timestamp: {
      async handler (val) {
        console.log('timestamp', val)
        this.editForm.wgFlag = false
        await this.getDetail(this.projectId)
      },
      immediate: true
    },
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  props: {
    timestamp: '',
    projectId: null,
    readOnly: false,
    item: {},
    unitDataDetail: {}
  },
  data () {
    return {
      editFormRules: {
        classified: [{ required: true, message: '必填项', trigger: 'blur' }],
        reason: [{ required: true, message: '必填项', trigger: 'blur' }],
        region: [{ required: true, message: '必填项', trigger: 'blur' }],
        tripdate: [{ required: true, message: '必填项', trigger: 'blur' }],
        times: [{ required: true, message: '必填项', trigger: 'blur' }],
        approver: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether1: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether2: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether3: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether4: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether5: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether6: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether7: [{ required: true, message: '必填项', trigger: 'blur' }],
        whether8: [{ required: true, message: '必填项', trigger: 'blur' }],
        status: [{ required: true, message: '必填项', trigger: 'blur' }],
        description: [{ required: true, message: '必填项', trigger: 'blur' }],
        result: [{ required: true, message: '必填项', trigger: 'blur' }]
      },
      pageLoading: false,
      saveloading: false,
      editForm: {
        classified: '',
        reason: '',
        region: '',
        tripdate: [],
        times: '',
        approver: '',
        whether1: '',
        whether2: '',
        whether3: '',
        whether4: '',
        whether5: '',
        whether6: '',
        whether7: '',
        whether8: '',
        status: '',
        remarks: '',
        wgFlag: false,
        description: '',
        result: '',
        violationremarks: ''
      },
      classifiedOptions: ['一般', '重要', '核心', '无'],
      reasonOptions: ['旅游', '探亲', '其他'],
      yesOrNoOptions: ['是', '否'],
      statusOptions: ['集中保管', '批准借出', '个人持有']
    }
  },
  methods: {
    editFormSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.readOnly) {
            this.$message({
              message: '测试提交成功！',
              type: 'success'
            })
          } else {
            // 新增：检查事由为"其他"时备注是否填写
            if (this.editForm.reason === '其他' && !this.editForm.remarks) {
              this.$message({
                message: '事由填报“其他”，需在备注栏说明具体情况',
                type: 'error'
              })
              return // 阻止继续提交
            }
            if (this.editForm.whether4 === '是' && !this.editForm.remarks) {
              this.$message({
                message: '“是否存在擅自出国（境）、超期未归、公款报销费用、泄露国家秘密等违规问题”填报“是”，需在备注栏说明具体情况',
                type: 'error'
              })
              return // 阻止继续提交
            }
            if (!this.editForm.wgFlag) {
              this.editForm.description = ''
              this.editForm.result = ''
              this.editForm.violationremarks = ''
            }
            this.editForm.tripdate = this.editForm.tripdate ? this.editForm.tripdate.join('-') : ''
            // 测试（防止目前旧接口报错，更换接口后需要删除）
            // this.editForm.birthday = '200001'
            // this.editForm.job = [{level: '', name: ''}]
            // 返回父页面数据
            this.$emit('addData', JSON.parse(JSON.stringify(this.editForm)))
          }
        }
      })
    },
    isDate8 (sDate) {
      if (!/^[0-9]{8}$/.test(sDate)) {
        return false
      }
      var year, month, day
      year = sDate.substring(0, 4)
      month = sDate.substring(4, 6)
      day = sDate.substring(6, 8)
      var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if (year < 1700 || year > 2500) return false
      if (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) iaMonthDays[1] = 29
      if (month < 1 || month > 12) return false
      if (day < 1 || day > iaMonthDays[month - 1]) return false
      return true
    },
    isDate6 (sDate) {
      if (!/^[0-9]{6}$/.test(sDate)) {
        return false
      }
      var year, month
      year = sDate.substring(0, 4)
      month = sDate.substring(4, 6)
      if (year < 1700 || year > 2500) return false
      if (month < 1 || month > 12) return false
      return true
    },
    formatDate8 (str) {
      return str.slice(0, 4) + '-' + str.slice(4, 6) + '-' + str.slice(6, 8)
    },
    getDetail (id) {
      if (id) {
        this.pageLoading = true
        this.$http
          .get(this.$http.defaults.supervisionAPI + `api/statsProjectData/getById?id=` + id)
          .then(response => {
            this.editForm = {
              classified: '',
              reason: '',
              region: '',
              tripdate: [],
              times: '',
              approver: '',
              whether1: '',
              whether2: '',
              whether3: '',
              whether4: '',
              whether5: '',
              whether6: '',
              whether7: '',
              whether8: '',
              status: '',
              remarks: '',
              wgFlag: false,
              description: '',
              result: '',
              violationremarks: ''
            }
            if (this.item && JSON.stringify(this.item) !== '{}') {
              console.log('修改')
              this.editForm = JSON.parse(JSON.stringify(this.item.reportItemJson))
              if (this.editForm.tripdate) {
                this.editForm.tripdate = this.editForm.tripdate.split('-')
              } else {
                this.editForm.tripdate = []
              }
              this.editForm.wgFlag = !!this.editForm.wgFlag
              this.editForm.id = this.item.id
            }
            this.pageLoading = false
          })
          .catch(error => {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          })
      }
    }
  }
}
</script>
<style>
#assessdetail .el-upload-list__item{
  width: 250px;
}
#assessdetail a{
  width: 200px;
}
.assessdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
.assessdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
  .cardtab .el-tabs__header{
    padding:0 !important;
    border-bottom:1px solid #E4E7ED;
  }
  #assessdetail .wboxs{
    height:45px;
    padding-top:0;
    margin-bottom: 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
<style scoped>
  .tickettable th{
    font-weight:lighter;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
  }
  .tickettable{
    width: 100%;
    border-left: 1px solid #95B8E7;
    border-top: 1px solid #95B8E7;
  }
  .tickettable td, .tickettable th{
    padding:5px 10px;
    margin:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    border-bottom: 1px solid #95B8E7;
    border-right: 1px solid #95B8E7;
  }
  .tickettable td{
    vertical-align: middle;
    text-align: center;
    font-weight: bolder;
  }
  .mytable{
    border-top: 1px solid #74a6cc;
    border-left: 1px solid #74a6cc;
    margin:0 10px 10px;
    width: calc(100% - 20px);
  }
  .mytable th{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    line-height: 150%;
    background: #FAFAFA;
    width:200px;
    text-align:right;
  }
  .mytable td{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
  }
</style>
